<template lang="pug">
    .top
        span.left
            //公司logo
            span.logo
                span.logo-icon
                span 后台系统
            //菜单栏的隐藏显示按钮
            span(@click="showAside").menu
        span.right
            span.user-icon
            span.user-name 管理员
                span.user-arrow-1
                span.user-arrow-2
            ul.user-set
                li.user-set-arrow-1
                li.user-set-arrow-2
                li 设置
</template>

<script>
export default {
  name: "Top",
  data() {
    return {
      logo: require("../../public/icon/top/law-icon.png"),
      isAside: true
    };
  },
  methods: {
    // 显隐侧边栏按钮
    showAside() {
      this.isAside = !this.isAside;
      this.$store.commit("showAside", this.isAside);
    }
  }
};
</script>

<style scoped lang="stylus">
    .top
        height 50px
        box-shadow 0 1px 5px rgba(0,0,0,.2)
        text-align: left
        display: flex
        justify-content space-between
        background-color white
        position fixed
        top:0
        left:0
        right:0
        z-index 1
        .left
            display inline-block
            width 230px
            .logo
                display: inline-block
                color white
                height:100%
                width 200px
                cursor default
                font-weight bold
                font-size 20px
                animation first 5s infinite
                @keyframes first
                    0%
                        background:#D24D57
                    50%
                        background:#EB7347
                    100%
                        background:#D24D57
                span
                    display: inline-block
                    height 60px
                    line-height 60px
                .logo-icon
                    width 25px
                    height 25px
                    background url("../../public/icon/top/law-icon.png") no-repeat
                    background-size cover
                    vertical-align text-bottom
                    margin 0 8px
            .menu
                width 20px
                height 20px
                display inline-block
                background url("../../public/icon/top/show-menu.png") no-repeat
                background-size cover
                cursor pointer
                margin-left 10px
                transition-duration 1s
                &:hover
                    transform rotate(180deg)
        .right
            margin-right 40px
            position relative
            cursor pointer
            &:hover  .user-set
                display: block
            .user-icon
                display: inline-block
                width 20px
                height 20px
                background url("../../public/icon/top/user-icon.png") no-repeat
                background-size cover
                vertical-align text-bottom
                margin-right 5px
            .user-name
                line-height 60px
                font-size 15px
                position relative
                .user-arrow-1,.user-arrow-2
                    display: inline-block
                    width 0
                    height:0
                    border 3px solid transparent
                    border-top-color black
                    position absolute
                    right -10px
                    top 5px
                .user-arrow-2
                    border-top-color white
                    top 4px
            .user-set
                list-style-type none
                box-shadow 1px 1px 4px grey
                position relative
                top -10px
                background white
                display: none
                li:nth-of-type(n+3)
                    text-align center
                    padding 5px
                    &:hover
                        background-color #eee
                .user-set-arrow-1, .user-set-arrow-2
                    width 0
                    height:0
                    border 6px solid transparent
                    border-bottom-color grey
                    position absolute
                    left 0
                    right 0
                    margin 0 auto
                    top -13px
                .user-set-arrow-2
                    top -12px
                    border-bottom-color white

</style>
